<html>
<head>
<script src="../../resources/js-test.js"></script>
<script>
function runTest()
{
    description("This tests accessing form elements by name. "
        + "IE only lets you look up names under the first name the element had and "
        + "does not respond to name changes. Firefox remembers every name item has been "
        + "accessed with, but forgets items that have not been accessed. "
        + "This test has been written to expect the Firefox behavior.");

    form = document.getElementById('form');
    a = document.getElementById('a');
    b = document.getElementById('b');

    shouldBe('form.length', '2');
    shouldBe('form.original', 'a');
    shouldBe('form.originalB', 'b');
    shouldBe('form.second', 'undefined');
    shouldBe('form.third', 'undefined');
    shouldBe('form.elements.original', 'a');
    shouldBe('form.elements.originalB', 'b');
    shouldBe('form.elements.second', 'undefined');
    shouldBe('form.elements.third', 'undefined');

    debug('');   
    debug("change the form item a's name to thisWillBeRemembered");
    debug('');   
    a.name="thisWillBeRemembered";
    debug("get the variable value through form element");
    shouldBe('form.thisWillBeRemembered', 'a');
    debug('');   
    debug("now change the form item a's name to thisWillBeRememberedToo");
    debug("access it in boolean context");
    a.name="thisWillBeRememberedToo";
    debug('');   
    if (form.thisWillBeRememberedToo)
        debug('accessed form.thisWillBeRememberedToo');
    debug('');   
    debug("now change the form item a's name to thisWillBeForgotten");
    debug('');   
    a.name="thisWillBeForgotten";
    debug("get the variable value through collection");
    shouldBe('form.elements.thisWillBeForgotten', 'a');
    debug('');   
    debug("now change the form item a's name to thisWillBeForgottenToo, but don't access it afterwards");
    a.name="thisWillBeForgottenToo";
        
    debug('');    
    debug("now change the form item a's name to second");
    debug('');
    a.name="second";
    
    shouldBe('form.length', '2');
    shouldBe('form.original', 'a');
    shouldBe('form.originalB', 'b');
    shouldBe('form.second', 'a');
    shouldBe('form.third', 'undefined');
    shouldBe('form.elements.original', 'undefined');
    shouldBe('form.elements.originalB', 'b');
    shouldBe('form.elements.second', 'a');
    shouldBe('form.elements.third', 'undefined');

    debug('');
    debug("now change the form item a's name to third");
    debug('');

    a.name="third";

    shouldBe('form.length', '2');
    shouldBe('form.original', 'a');
    shouldBe('form.originalB', 'b');
    shouldBe('form.second', 'a');
    shouldBe('form.third', 'a');
    shouldBe('form.elements.original', 'undefined');
    shouldBe('form.elements.originalB', 'b');
    shouldBe('form.elements.second', 'undefined');
    shouldBe('form.elements.third', 'a');

    debug('');
    debug("now change form item b's name to second");
    debug('');

    b.name="second";

    shouldBe('form.length', '2');
    shouldBe('form.original', 'a');
    shouldBe('form.originalB', 'b');
    shouldBe('form.second', 'b');
    shouldBe('form.elements.original', 'undefined');
    shouldBe('form.elements.originalB', 'undefined');
    shouldBe('form.elements.second', 'b');

    debug('');
    debug("now change a form item b's name to third");
    debug('');

    form.originalB.name="third";

    shouldBe('form.length', '2');
    shouldBe('form.original', 'a');
    shouldBe('form.originalB', 'b');
    shouldBe('form.second', 'b');
    shouldBe('form.third.length', '2');
    shouldBe('form.third[0]', 'a');
    shouldBe('form.third[1]', 'b');
    shouldBe('form.elements.original', 'undefined');
    shouldBe('form.elements.originalB', 'undefined');
    shouldBe('form.elements.second', 'undefined');
    shouldBe('form.elements.third.length', '2');
    shouldBe('form.elements.third[0]', 'a');
    shouldBe('form.elements.third[1]', 'b');
    
    debug('');
    debug("now change a form item b's name to fourth");
    debug('');

    form.originalB.name="fourth";
    
    shouldBe('form.third', 'a');
    shouldBe('form.third.length', 'undefined');
    shouldBe('form.elements.third', 'a');
    shouldBe('form.elements.third.length', 'undefined');

    debug('');
    debug("now remove element a");
    debug('');

    form.removeChild(a);

    shouldBe('form.length', '1');
    shouldBeUndefined('form.original', 'a');
    shouldBe('form.originalB', 'b');
    shouldBe('form.second', 'b');
    shouldBeUndefined('form.third', 'a');
    shouldBe('form.fourth', 'b');
    shouldBe('form.elements.original', 'undefined');
    shouldBe('form.elements.originalB', 'undefined');
    shouldBe('form.elements.second', 'undefined');
    shouldBe('form.elements.third', 'undefined');
    shouldBe('form.elements.fourth', 'b');
 
    debug('');
    debug("check that we no longer remember the past names of a");
    debug('');

    shouldBe('form.thisWillBeForgotten', 'undefined');
    shouldBe('form.thisWillBeForgottenToo', 'undefined');
    shouldBeUndefined('form.thisWillBeRemembered');
    shouldBeUndefined('form.thisWillBeRememberedToo');
    debug('');
}
</script>
</head>
<body>
<form id='form'>
<input type='hidden' id='a' name='original'>
<input type='hidden' id='b' name='originalB'>
</form>

<form id="form1"><input name="foo" id="input3"></form>
<form id="form2"></form>

<form id="form4"><input name="foo"><input name="bar"><input name="bar"></form>

<p id="description"></p>
<div id="console"></div>
<script>
runTest();

debug('Ensures elements are removed from the past names map of a form element once they are no longer associated with the form element.');
var form1 = document.querySelector("#form1");
var input3 = document.querySelector("#input3");
shouldBe("form1['foo']", "input3");
shouldBeUndefined("form2.appendChild(form1.firstChild); form1['foo']");

shouldBe("form2['foo']", "input3");
shouldBeUndefined("form2.removeChild(input3); form2['foo']");

shouldBe("form1.appendChild(input3); form1['foo']", "input3");
// input3 will be an orphan. So form content attribute doesn't work.
shouldBeUndefined("input3.setAttribute('form', 'form1'); form1.removeChild(input3); input3.appendChild(form1); form1['foo']");
shouldNotBe("form1['foo']", "input3");

debug("");
debug("Don't add the element from the past names map if we've found elements of the given name.");
var form4 = document.querySelector("#form4");
shouldBe("form4['foo']", "form4.childNodes[0]");
shouldBe("form4['bar'][0]", "form4.childNodes[1]");
shouldBe("form4['bar'][1]", "form4.childNodes[2]");
shouldBe("form4.childNodes[0].name = 'bar'; form4.childNodes[1].name = form4.childNodes[2].name = 'foo'; form4['foo'].length", "2");
</script>
</body>
</html>
